<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        vue实例容器:创建的vue实例关联的页面标签结构是当前实例的容器;
                   但标签中的子组件标签对应的页面结构不是该实例的容器范围。
        ！！！ vue实例的容器相互对立、相互隔离【不考虑结构】

        局部:局部功能只能被使用与定义的vue实例容器中
        全局:全局功能可以在应用内的所有vue实例容器中使用【忽略容器范围的】
        </pre>
        <h5>父组件实例容器</h5>
        <p v-test>msg:{{ msg }}</p>
        <!-- 子组件标签在浏览渲染运行时，会被替换成子组件实例对应的标签结构 -->
        <test-box></test-box>
        <box-content></box-content>
        <global-box></global-box>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        const app = createApp({
            data() {
                return {
                    msg:"父实例的msg变量"
                }
            },
            // 局部定义
            components: {
                BoxContent:{
                    template:`
                    <div class="cbox">
                        <h5>子组件BoxContent实例容器</h5>
                        <test-box1></test-box1>
                    </div>
                    `,
                    components: {
                        TestBox1:{
                            template:`
                            <div class="cbox">
                                <h5>子组件BoxContent-TestBox1实例容器</h5>
                                <global-box></global-box>
                            </div>
                            `,
                        },
                    },
                },
                TestBox:{
                    template:`
                    <div class="cbox">
                        <h5>子组件TestBox实例容器</h5>
                        <p v-test2>msg:{{ msg }}</p>
                        <global-box></global-box>
                    </div>
                    `,
                    data(){
                        return {
                            msg:"子组件实例的msg变量"
                        }
                    }
                },
            },
            directives:{
                test(el){
                    el.style.color="red";
                }
            }
        })
        
        app.component("GlobalBox",{
            template:`
            <div class="cbox">
                <h5>全局组件GloabBox实例容器</h5>
            </div>
            `
        })
        app.directive("test2",function(el){
            el.style.color="blue";
        })

        app.mount("#app")
    </script>
</body>
</html>